<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{message}}</div>
        <div :class="{active: isActive}">hello</div>
        <button @click="big">大 </button><br>
        <button @click="small">小</button>
    </div>
    <script>

        const app = new Vue({
            el: '#app',
            data() {
                return{
                    message: '1232',
                    isActive: false,
                }
            },
            methods: {
                lpo() {
                    console.log('1314');
                },
                big() {
                    this.isActive = true;
                },
                small() {
                    this.isActive=false;
                },


            }
        })
    </script>
    <style>
        .active {
            color: red;
            font-size: 130px;
        }
    </style>

</body>
</html>